---
permalink: "/ui/ui-elements/forms/date-field/index.xml"
tags: "UI/UI Elements/Forms"
hv_title: "Date Field"
hv_button_behavior: "back"
---
{% extends 'templates/scrollview.xml.njk' %}
{% from 'macros/about/index.xml.njk' import about %}
{% from 'macros/description/index.xml.njk' import description %}

{% block styles %}
  <style
    id="form-group"
    borderColor="#8D9494"
    borderRadius="12"
    borderWidth="1"
    flex="1"
    marginLeft="24"
    marginRight="24"
    marginTop="48"
    padding="24"
  />
  <style id="input-text-error" color="#FF4847"/>
  <style
    id="InputCustom"
    borderColor="#4E4D4D"
    borderRadius="4"
    borderWidth="2"
    flex="1"
    fontWeight="normal"
    marginBottom="40"
    paddingBottom="8"
    paddingLeft="8"
    paddingRight="8"
    paddingTop="8">
    <modifier pressed="true">
    <style borderColor="#4778FF"/>
    </modifier>
    <modifier focused="true">
    <style borderColor="#4778FF"/>
    </modifier>
  </style>
  <style id="help-error" color="#FF4847"/>
  <style
    id="input"
    borderBottomColor="#E1E1E1"
    borderBottomWidth="1"
    borderColor="#4E4D4D"
    flex="1"
    fontSize="16"
    fontWeight="normal"
    paddingBottom="8"
    paddingTop="8">
    <modifier pressed="true">
    <style borderBottomColor="#4778FF"/>
    </modifier>
    <modifier focused="true">
    <style borderBottomColor="#4778FF"/>
    </modifier>
  </style>
  <style id="input-custom-text" color="purple" fontSize="18" fontWeight="600"/>
  <style id="input-error" borderBottomColor="#FF4847">
    <modifier focused="true">
    <style borderBottomColor="#FF4847"/>
    </modifier>
  </style>
  <style id="picker-modal-custom" backgroundColor="purple" borderTopColor="#E1E1E1" borderTopWidth="1"/>
  <style id="picker-modal-custom-overlay" backgroundColor="purple" opacity="0.4" />
  <style id="picker-modal-custom-text" color="white" fontSize="20" fontWeight="600" padding="24" paddingBottom="0">
    <modifier pressed="true">
    <style color="yellow"/>
    </modifier>
  </style>
  <style id="label" borderColor="#4E4D4D" fontSize="16" fontWeight="bold" lineHeight="24" marginBottom="8"/>
  <style id="help" borderColor="#FF4847" fontSize="16" fontWeight="normal" lineHeight="24" marginTop="16"/>
  <style id="input-text" color="black" fontSize="16" fontWeight="normal"/>
{% endblock %}

{% block content %}
  {% call about() -%}
    Date fields open a system-appropriate modal to choose a date value. On iOS, styles can be applied to the modal and
    save/cancel labels.
  {%- endcall %}
  {% call description() -%}
    Label formatting is determined by the client. In these examples, wer're using moment.js for the formatting.
  {%- endcall %}
  {% include './_form.xml.njk' %}
{% endblock %}
